<template>
	<view class="shade flex" :class="show ? 'show' : ''" :style="{ '--fss': app.theme.fss() }" @touchmove.stop.prevent>
		<view class="updateView" :class="show ? 'show' : ''" @tap.stop v-if="info">
			<image src="/static/img/Yr5.png" mode="widthFix" class="updateImage"></image>
			<view class="updateMain">
				<view class="h3">版本升级</view>
				<textarea class="content" v-model="info.content" disabled auto-height></textarea>
				<view class="btnFlex flex">
					<view class="item" @tap="btnTap(false)">暂不更新</view>
					<view class="item active" @tap="btnTap(true)">立即更新</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, inject, defineExpose } from "vue";
	const app = inject('app');
	
	/* 变量区域 */
	// 显示状态
	const show = ref(false);
	
	// 基本数据
	const info = ref(null);

	
	/* 方法区域 */
	// 打开弹窗
	function open(e) {
		let res = e || {};
		res.content = "1. 优化登录页面卡顿问题\n2. 修复提交AI报错的问题\n3. 提升提交内容比较慢的问题。" || e.content;
		info.value = res;
		show.value = true;
		uni.hideTabBar();
	}
	
	// 关闭弹窗
	function close() {
		show.value = false;
		uni.showTabBar();
	}
	
	// 按钮的点击
	function btnTap(type){
		if(type){
			plus.runtime.openURL("https://www.baidu.com/");
		}else{
			// 不更新，储存缓存一下，下次同版本则忽略更新。
		}
		
		close();
	}
	
	// 将方法抛出给父级组件使用
	defineExpose({ open });
</script>

<style scoped lang="scss">
	.shade {
		background: rgba(0,0,0,0.6);
		.updateView{
			visibility: hidden;
			transition: 0.2s all;
			transform: scale(0);
			width: 90%;
			&.show {
				visibility: visible;
				transform: scale(1);
				animation: fadeInAndScale .2s cubic-bezier(.25,.1,.25,1.3);
				@keyframes fadeInAndScale {
					0% {
					    transform: scale(0);
					}
					70% {
					    transform: scale(1.1);
					}
					100% {
					    transform: scale(1);
					}
				}
			}
			.updateImage{
				display: block;
				width: 100%;
				position: relative;
				z-index: 2;
			}
			.updateMain{
				width: calc(100% - 2rpx);
				position: relative;
				margin-top: -4rpx;
				background: #222837;
				border-radius: 0 0 30rpx 30rpx;
				padding: 50rpx 40rpx 48rpx 40rpx;
				.h3{
					font-size: calc(30rpx * var(--fss));
					color: #FFF;
					font-weight: bold;
					line-height: 1.5;
				}
				.content{
					margin-top: 12rpx;
					font-size: calc(28rpx * var(--fss));
					color: rgba(255,255,255,0.65);
					line-height: 1.9;
					width: 100%;
					max-height: 250rpx;
					overflow-y: auto;
				}
				.btnFlex{
					margin-top: 35rpx;
					.item{
						line-height: 70rpx;
						background: #FFF;
						flex: 1;
						width: 0;
						text-align: center;
						transition: 0.2s all;
						border-radius: 100rpx;
						font-size: calc(26rpx * var(--fss));
						color: #2a2a2a;
						&.active{
							background: $background;
							color: #000;
							font-weight:bold;
						}
						&:active{
							opacity: 0.8;
						}
						&:nth-child(2){
							margin-left: 25rpx;
						}
					}
				}
			}
		}
	}
</style>